<template>
  <div class="tzl_test">
    <div v-if="showType === 'text'" class="form_item" style="width: 300px">
      <h5>span</h5>
      <h6>span 基础组件</h6>
      <text-base
        v-model="spanBaseValue"
        :row="{ tip: 666 }"
        :formatter="
          (val, row) => {
            return row?.tip;
          }
        "
        trigger="click"
      >
      </text-base>
    </div>
    <img-text v-model="imgTextValue" v-bind="imgBindConfig"></img-text>
    <el-button class="get_file" @click="getFormValue">Form 元素值打印</el-button>
  </div>
</template>

<script setup>
import TextBase from '@/components/text/TextBase.vue';
import ImgText from '@/components/text/ImgText.vue';
import Delete from '@/assets/image/delete.png';

const spanBaseValue = $ref('123');

const showType = $ref('text');
const imgTextValue = $ref('imgTextValue');
const imgBindConfig = $ref({
  src: Delete,
  imgStyle: 'cursor:pointer',
});

function getFormValue() {}
</script>
<style lang="scss" scoped>
h5 {
  font-size: 16px;
}
h6 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
  position: relative;
  padding-left: 6px;
}
h6::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 15px;
  display: block;
  background: #409eff;
  top: 2px;
  left: 0;
}
.tzl_test {
  margin: 20px;
}
.get_file {
  margin: 20px;
}
</style>
